<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="选择分类:" prop="category1">
                            <SelectCategory url="/admin/pz.category/tree"
                                            :queryParams="{
                                                type: 1
                                            }"
                                            :check-strictly="true"
                                            :value="[form.category1, form.category2, form.category3]"
                                            @change="onChangeCategory"></SelectCategory>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务名称:" prop="title">
                            <el-input v-model="form.title" placeholder="请输入服务名称" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="列表图:" prop="image">
                    <ImageUpload v-model="form.image" :limit="1" />
                </el-form-item>
                <el-form-item label="轮播图:" prop="images">
                    <ImageUpload v-model="form.images" :limit="10" />
                </el-form-item>
                <el-form-item label="服务内容:" prop="content">
                    <editor v-model="form.content"></editor>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="选择地区:" prop="province">
                            <SelectCityArea :value="[form.province, form.city, form.dist]" @change="onChangeCityArea"></SelectCityArea>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="浏览数:" prop="viewCount">
                            <el-input-number v-model="form.viewCount" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="购买数:" prop="buyCount">
                            <el-input-number v-model="form.buyCount" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="原价:" prop="originalPrice">
                            <el-input-number v-model="form.originalPrice" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单价:" prop="money">
                            <el-input-number v-model="form.money" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="押金:">
                            <el-input-number v-model="form.deposit_money" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态:" prop="status">
                            <el-select v-model="form.status" placeholder="请选择状态" clearable>
                                <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序:" prop="sortweight">
                            <el-input-number v-model="form.sortweight" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
import SelectCityArea from "../../../components/My/SelectCityArea";
import SelectCategory from "../../../components/My/SelectCategory";
export default {
    name: 'EditForm',
    components: {SelectCategory, SelectCityArea},
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                category1: [{ required: true, message: "请选择一级分类", trigger: "blur" }],
                title: [{ required: true, message: "请输入服务名称", trigger: "blur" }],
                image: [{ required: true, message: "请上传列表图", trigger: "blur" }],
                images: [{ required: true, message: "请上传轮播图", trigger: "blur" }],
                province: [{ required: true, message: "请选择所在地区", trigger: "blur" }],
                // viewCount: [{ required: true, message: "请输入浏览数", trigger: "blur" }],
                // buyCount: [{ required: true, message: "请输入购买数", trigger: "blur" }],
                originalPrice: [{ required: true, message: "请输入原价", trigger: "blur" }],
                money: [{ required: true, message: "请输入单价", trigger: "blur" }],
            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            status:[
                { label: "启用", value: 1 },
                { label: "禁用", value: 2 },
            ],
        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        onChangeCategory(e) {
            if (e.length >= 3) this.$set(this.form, 'category3', e[2])
            if (e.length >= 2) this.$set(this.form, 'category2', e[1])
            if (e.length >= 1) this.$set(this.form, 'category1', e[0])
        },
        onChangeCityArea(e) {
            if (e.length >= 3) this.$set(this.form, 'dist', e[2])
            if (e.length >= 2) this.$set(this.form, 'city', e[1])
            if (e.length >= 1) this.$set(this.form, 'province', e[0])
        }
    }
}
</script>
